<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:composite="http://java.sun.com/jsf/composite">
 
	<composite:interface>
		<composite:attribute name="options" type="java.util.List" required="true" />
		<composite:attribute name="addOption" method-signature="void action()" required="true" />
		<composite:attribute name="removeOption" method-signature="void action()" required="true" />
		<composite:attribute name="render" />
	</composite:interface>
	 
	<composite:implementation>
		<h:outputStylesheet library="components/question/css" name="layout.css" target="head" />
		
		<h:panelGrid columns="2" rowClasses="valign-top">	
			
			<f:ajax event="action" render="questionChoices">	
				<h:dataTable id="questionChoices"
							 value="#{cc.attrs.options}"
							 var="option">
	
					<h:column>
						<h:graphicImage library="images" name="unchecked.png" />
					</h:column>
					<h:column>					
						<h:inputText value="#{option.text}" size="55" class="options-textField">
							<f:ajax event="keyup" process="@this" />
						</h:inputText>
					</h:column>
				</h:dataTable>
				
				<h:column style="text-align: right;">
							
					<h:commandButton id="addOption"
									 value="+"
									 action="#{cc.attrs.addOption}"
									 styleClass="options-btn-control" />
									 
					<h:commandButton id="removeOption"
									 value="-"
									 action="#{cc.attrs.removeOption}"
	                				 styleClass="options-btn-control" />
				</h:column>
			</f:ajax>
		</h:panelGrid>
	</composite:implementation>
</html>
